<template>
  <div id="dashboard">
    <!-- <div class="address">
      <van-icon name="location-o" />
      <span>江夏区</span>
    </div> -->
    <div class="molude_title">数据总览</div>
    <div class="data_info">
      <van-row>
        <van-col :span="6" v-for="(item, index) in dataInfo" :key="index">
          <div class="data_info_item">
            <i class="num">{{ item.value || 0 }}</i>
            <div class="info">{{ item.label || '-' }}</div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="warn_msg">
      <div
        class="warn_msg_item"
        v-for="(item, index) in warnList"
        :key="index"
        @click="goToDetail(item)"
      >
        <div class="warn_msg_info">{{ alarmTypeEnum[item.alarmType] || '-' }}</div>
        <div class="warn_msg_content">
          <div class="msg">
            {{ (item.pointName || '') + '触发' + alarmTypeEnum[item.alarmType] }}
          </div>
          <div class="date">{{ item.alarmTime || '-' }}</div>
        </div>
        <div class="warn_msg_icon">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="molude_title">近期国内地震信息</div>
    <div class="rectangle">
      <van-steps direction="vertical" :active="-1">
        <van-step v-for="(item, index) in earthquakeList" :key="index">
          <div class="rectangle_item">
            <div>
              <div class="msg">{{ item.locname || '-' }}</div>
              <div class="date">{{ item.oritime || '-' }}</div>
            </div>
            <div
              :class="[
                'magnitude',
                { orange: item.magnitude > 3 && item.magnitude <= 6 },
                { danger: item.magnitude > 7 },
              ]"
            >
              {{ item.magnitude || '-' }}级
            </div>
          </div>
        </van-step>
      </van-steps>
    </div>
    <!-- <div class="molude_title">设备接入统计</div>
    <div class="device">
      <Device />
    </div> -->
    <div class="molude_title">设备数量统计</div>
    <div class="model">
      <Model />
    </div>
    <div class="molude_title">近期一周告警趋势统计</div>
    <div class="trend">
      <Alarm />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Device from './component/device.vue'
import Alarm from './component/alarm.vue'
import Model from './component/model.vue'
import router from '@/router'
import { showToast, showLoadingToast, closeToast } from 'vant'
import { dataScreen, recentEarthquakeInfo } from '@/api/dashboard'
import { getAlarmList } from '@/api/warn'
const dataInfo = ref([
  {
    label: '设备总数',
    value: 0,
  },
  {
    label: '项目总数',
    value: 0,
  },
  {
    label: '检测阵总数',
    value: 0,
  },
  {
    label: '测点总数',
    value: 0,
  },
])
enum labelEnum {
  deviceTotalNum = '设备总数',
  projectTotalNum = '项目总数',
  monitorTotalNum = '监测阵总数',
  pointTotalNum = '测点总数',
}
const alarmTypeEnum: any = {
  1: '设备告警',
  2: '测点告警',
  3: '区域告警',
  4: '地震告警',
}
const getDataInfo = async () => {
  dataScreen().then((res) => {
    dataInfo.value = Object.keys(labelEnum).map((key) => {
      return {
        label: labelEnum[key],
        value: res.data[key],
      }
    })
  })
}
getDataInfo()
const warnList = ref([])
const getAlarm = async () => {
  const result = await getAlarmList()
  warnList.value = result.rows.filter((i, y) => y === 0)
}
getAlarm()
const goToDetail = (item: any) => {
  router.push({
    path: '/warn_detail',
    query: item,
  })
}
const earthquakeList = ref([])

const getEarthQuakeList = async () => {
  const result = await recentEarthquakeInfo()
  earthquakeList.value = result.data
}
getEarthQuakeList()
</script>

<style lang="scss" scoped>
@mixin getStyle($size, $color, $margin) {
  font-size: $size;
  color: $color;
  margin-bottom: $margin;
}
@mixin getModule($margin, $margin2) {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  margin: $margin $margin2;
  overflow: hidden;
}
.address {
  @include getStyle(32px, #121212, 62px);
}
.data_info_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  .num {
    font-weight: 700;
    @include getStyle(50px, #252628, 18px);
  }
  .info {
    @include getStyle(26px, #747575, 0);
  }
}

.warn_msg {
  @include getModule(66px, 0);
  &_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px;
  }
  &_icon {
    float: right;
  }
  &_info {
    width: 90px;
    height: 76px;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    background: linear-gradient(135deg, #ff2f32 0%, #1e59d7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 24px;
    border-right: 1px solid #a3a3a3;
  }
  &_content {
    flex: 1;
    padding-left: 24px;
  }
}
.rectangle {
  @include getModule(30px, 0);
  padding: 30px;
  :deep(.van-step__circle) {
    width: 16px;
    height: 16px;
  }
  &_item {
    display: flex;
    justify-content: space-between;
  }
  .magnitude {
    width: 121px;
    height: 48px;
    background: #ebf7fa;
    border-radius: 31px;
    font-weight: 700;
    font-size: 34px;
    line-height: 48px;
    color: #0f95af;
    text-align: center;
    &.danger {
      color: #ff546b;
      background: #faebed;
    }
    &.orange {
      color: orange;
      background: #faebed;
    }
  }
}
.device {
  @include getModule(30px, 0);
  height: 370px;
}
.model {
  @include getModule(30px, 0);
  height: 712px;
}
.trend {
  @include getModule(30px, 0);
  height: 524px;
  margin-bottom: 148px;
}
.msg {
  font-weight: 700;
  @include getStyle(32px, #252628, 14px);
}
.date {
  @include getStyle(28px, #5b5c5c, 0);
}
</style>
